<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>醋醋商城</title>
    <!--引用css样式-->
    <link rel="shortcut icon" href="favicon.ico">
    <!--<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.css">-->
    <link type="text/css" rel="stylesheet" href="/static/css/basic.css">
    <link type="text/css" rel="stylesheet" href="/static/css/bootstrap.css">
</head>

<style>

</style>
<body>

<div class="container">
    <!--Top开始-->
    <div id="Top">
        <div class="banner"><a href="/index"><img src="/static/images/logo.png"/></a></div>
        <!--search begin-->
    </div>
    <!--Top结束-->
    <div style="margin-top: 120px"></div>

    <div class="alert alert-danger" role="alert" th:if="${#httpServletRequest.getAttribute('noMsg')==1}">
                <span>
                    对不起，没有数据
                </span>
        <a href="/">返回首页</a>
    </div>

    <div th:each="product,productStat : ${#httpServletRequest.getAttribute('products')}">
        <div th:if="${productStat.index%3==0}" class="row">
            <div class="col-md-4">
                <div class="thumbnail" style="height: 425px;">
                    <img class="lazy" th:src="${product.mainImage}" width="300"
                         height="150" th:data-src="${product.mainImage}"
                         alt="Bootstrap 优站精选">
                    <div class="caption">
                        <h3>
                            <small><span th:text="${product.subtitle}"></span></small>
                        </h3>
                        <p th:text="${product.detail}"></p>
                        <h4>
                            <small> 价格:<span th:text="${product.price}"></span></small>
                        </h4>
                        <h4>
                            <small> 库存:<span th:text="${product.stock}"></span></small>
                        </h4>
                    </div>
                </div>
            </div>

            <div th:unless="${productStat.index%3!=0}">
                <div class="col-md-4">
                    <div class="thumbnail" style="height: 425px;">
                        <img class="lazy" th:src="${product.mainImage}" width="300"
                             height="150" th:data-src="${product.mainImage}"
                             alt="Bootstrap 优站精选">
                        <div class="caption">
                            <h3>
                                <small><span th:text="${product.subtitle}"></span></small>
                            </h3>
                            <p th:text="${product.detail}"></p>
                            <h4>
                                <small> 价格:<span th:text="${product.price}"></span></small>
                            </h4>
                            <h4>
                                <small> 库存:<span th:text="${product.stock}"></span></small>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul id="page" class="pagination"></ul>
    </div>


</body>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/js/bootstrap.js"></script>
<script src="/static/js/bootstrap-paginator.js"></script>


<script th:inline="javascript">
    $(function () {
        var currentPage = [[${#httpServletRequest.getAttribute('page')}]];
        var totalPages = [[${#httpServletRequest.getAttribute('total')}]];

        var keywords = [[${#httpServletRequest.getAttribute('keywords')}]];
        if (keywords == null) {
            keywords = '';
        }
        $("#page").bootstrapPaginator({
            bootstrapMajorVersion: 3, //对应的bootstrap版本
            currentPage: currentPage, //当前页数
            numberOfPages: 10, //每次显示页数
            totalPages: totalPages, //总页数
            shouldShowPage: true, //是否显示该按钮
            useBootstrapTooltip: true,
            //点击事件
            onPageClicked: function (event, originalEvent, type, page) {
                window.location.href = "http://localhost:8080/search" + "?" + "page=" + page + "&size=" + 10 + "&keywords=" + keywords;
            },
        });
    })
</script>
</html>